<template>
  <view class="home">
    <template v-if="isScan">
      <ScanCode @GetCode="getRestaurantId" />
    </template>
    <template v-else>
      <!-- 轮播图+按钮选项 -->
      <view class="info-container">
        <!-- 轮播图 -->
        <Swiper :swiperHeight="1000"></Swiper>
        <!-- 按钮 -->
        <view class="left-btn" @click="ceshi">
          <view class="btn">
            <!-- 图片 -->
            <view class="image">
              <image src="/static/images/pages/home/book@2x.webp" mode=""></image>
            </view>
            <!-- 标题 -->
            <view class="title"> 查看订单 </view>
            <!-- 介绍 -->
            <view class="content"> 往年的美食 </view>
          </view>
        </view>
        <view class="rigth-btn">
          <view class="btn" @click="scanQrcode">
            <!-- 图片 -->
            <view class="image">
              <image src="/static/images/pages/home//scan@2x.webp" mode=""></image>
            </view>
            <!-- 标题 -->
            <view class="title"> 扫码点餐 </view>
            <!-- 介绍 -->
            <view class="content"> 开启美食之旅 </view>
          </view>
        </view>
      </view>
      <view class="map-container" @click="changeMap(restaurantInfo.id)">
        <!-- 邀请好友 -->
        <view class="info">
          <image style="width: 100%; height: 100%" src="../../static/images/pages/home/image.png@2x.webp" mode="">
          </image>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import { wxxLogin, peopleInfoList } from "@/common/api.js";
//引入轮播图
import Swiper from "@/components/Swiper/index.vue";
// #ifdef H5
import ScanCode from "@/components/ScanCode/index.vue";
const qrcode = require("qrcodejs2");
// #endif
import { getRestaurantInfo, showToast } from "@/common/api.js";
import { mapState } from "vuex";
export default {
  name: "home",
  components: {
    Swiper,
    // #ifdef H5
    ScanCode,
    // #endif
  },
  data() {
    return {
      postersImageList: [], //头部
      code: "", //扫码
      restaurantId: "", //餐厅id
      // #ifdef H5
      isScan: false,
      // #endif
    };
  },
  computed: {
    ...mapState({
      restaurantInfo: (state) => state.restaurant.restaurantInfo,
    }),
  },

  mounted() {
    // this.$store.dispatch('setRestaurantId', 1) //默认餐厅id
    this.getLogin();
  },
  methods: {

    async getLogin() {
      uni.login({
        provider: "weixin",
        //使用微信登录
        success: async function (loginRes) {
          let res = await wxxLogin({
            code: loginRes.code,
          });
          if (res.code == 200) {
            let token = res.data;
            uni.setStorageSync("token", token);
          }
        },
      });
    },
    async getRestaurantId(val, flag = false) {
      try {
        if (val) {
          this.isScan = false;
          const value = val;
          let roomid = value.split("=")[1];
          if (roomid) {
            let isPeopleRes = await peopleInfoList({ uid: roomid });
            if (isPeopleRes.code == 200) {
              uni.setStorageSync("roomid", roomid);
              let { data: pepepleRes } = isPeopleRes;
              setTimeout(() => {
                if (pepepleRes[0]) {
                  uni.$u.route("/pages/orderHome/index")
                } else {
                  this.$store.dispatch("changeNavBar", "menu");
                }
              }, 1000);
            } else {
              showToast("服务器开了点小问题");
            }
          } else {
            showToast("请扫描正确下单码");
          }
        }
      } catch (e) {
        console.log("🚀 ~ file: index.vue:137 ~ getRestaurantId ~ e:", e);
      }
    },
    scanQrcode() {
      // #ifndef H5
      const _that = this;
      uni.scanCode({
        scanType: ["qrCode"],
        // 扫描的类型
        async success(res) {
          // console.log('二维码类型：' + res.scanType);
          // console.log('二维码内容：' + res.result);
          await _that.getRestaurantId(res.result);
        },
        fail(err) {
          console.log("扫码失败", err);
        },
        complete(end) {
          console.log("扫码结束", end);
        },
      });
      // #endif
      // #ifdef H5
      this.isScan = true;
      // #endif
    },
    async ceshi() {
      try {
        const res = await requestDemo();
        console.log(res);
      } catch (err) {
        console.log(err);
      }
    },
    changeMap(id) {
      uni.navigateTo({
        url: `/pages/store/index`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  min-height: 100%;
  background-color: $pages-background-color;

  // 轮播图+按钮选项
  .info-container {
    position: relative;
    width: 100%;
    height: 1000rpx;
    border-radius: 0px 0px 48rpx 48rpx;
    background: linear-gradient(
      100.5deg,
      rgba(38, 188, 212, 1) 0%,
      rgba(38, 188, 212, 0.57) 100%
    );
    overflow: hidden;

    // 图标位置
    .image {
      width: 72rpx;
      height: 72rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    //共有属性
    .btn {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      margin-left: 40rpx;
      margin-top: 10rpx;
      width: calc(100% - 80rpx);
      height: 220rpx;

      .title {
        margin-left: 4rpx;
        margin-top: 8rpx;
        font-size: 32rpx;
        font-weight: 700;
        color: #000000;
      }

      .content {
        margin-left: 4rpx;
        margin-top: 8rpx;
        font-size: 12px;
        font-weight: 400;
        color: #9e9e9e;
      }
    }

    .left-btn {
      position: absolute;
      bottom: 40rpx;
      left: 50rpx;
      width: 260rpx;
      height: 280rpx;
      border-radius: 24rpx;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2rpx 10rpx 0px $shadow-color;
    }

    .rigth-btn {
      position: absolute;
      bottom: 40rpx;
      right: 50rpx;
      width: 350rpx;
      height: 280rpx;
      opacity: 1;
      border-radius: 24rpx;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2rpx 10rpx 0px $shadow-color;
    }
  }

  // 地图信息
  .map-container {
    height: 200rpx;
    background: $white-notion;

    // 地图信息
    .mapInfo {
      width: 100%;
      height: 180rpx;
      border-radius: 0px 0px 0px 60rpx;
      background-color: $pages-background-color;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .mapBox {
        width: 720rpx;
        height: 90rpx;
        background-color: $white-notion;
        border-radius: 48rpx 0px 0px 48rpx;
        box-shadow: 0px 1rpx 1rpx 0px $shadow-color;
        display: flex;
        align-items: center;
        justify-content: space-between;

        // 左边
        .left {
          height: 100%;
          width: 70%;
          display: flex;
          align-items: center;

          // 地图图标
          .map-icon {
            margin-left: 32rpx;
            width: 48rpx;
            height: 48rpx;
          }

          span {
            flex: 1;
            font-size: 28rpx;
            font-weight: 500;
            color: $main-text;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .right {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          span {
            /** 文本1 */
            font-size: 24rpx;
            font-weight: 600;
            color: $main-color;
            margin-right: 32rpx;
            vertical-align: middle;
            display: flex;
            align-items: flex-end;

            .change-icon {
              width: 28rpx;
              height: 28rpx;
              margin-bottom: 2rpx;
            }
          }
        }
      }
    }

    // 邀请好友
    .info {
      margin: 0 auto;
      margin-top: 20rpx;
      width: 720rpx;
      height: 180rpx;
      border-radius: 12rpx;
      background: linear-gradient(210.58deg, #ffffff 0%, #26bcd4 100%);
      overflow: hidden;
    }
  }
}
</style>